<template>
    <div class="shopping" :class="{'shopping-with-fixbar':cartList.length > 0}">
        <m-login-bar :options="loginConfig" :show="!userInfo.loginStatus"></m-login-bar>
        <div class="shopping-no-data" v-if="userInfo.loginStatus && cartList.length === 0">
            <div class="no-data-info">
                <i class="iconfont">&#xe631;</i>
                <p>购物车内还没商品哦，去逛逛吧~</p>
            </div>
            <div class="no-data-guide flex">
                <div class="guide-item item-ticket flex-item">
                    <span>优惠券</span>
                    <p>限量发放快去抢</p>
                </div>
                <div class="guide-item item-collection flex-item">
                    <span>我的收藏</span>
                    <p>你关心的都在这里</p>
                </div>
            </div>
        </div>
        <div class="shopping-cart" v-if="cartList.length > 0 && userInfo.loginStatus">
            <div class="shopping-cart-menu">
                <div class="menu-location">
                    <i class="iconfont">&#xe60d;</i>
                    <p>韶关市仁化县</p>
                </div>
                <div class="menu-edit" @click="toggleEditCart">
                    <span>{{isEditCart ? '完成' : '编辑商品'}}</span>
                </div>
            </div>
            <div class="shopping-cart-view">
                <m-cart-cell
                        :key="key"
                        v-for="(item,key) in cartList"
                        :data="item"
                ></m-cart-cell>
            </div>
            <div class="shopping-cart-fixbar">
                <div class="fixbar-select-all">
                    <m-select></m-select>
                    <span class="fixbar-select-all-text">全部</span>
                </div>
                <div class="fixbar-menu">
                    <div class="menu-buy" v-if="!isEditCart">
                        <div class="buy-info">
                            <div class="info-total-price">
                                <label>总计：</label>
                                <span>￥547.00</span>
                            </div>
                            <div class="info-coupon">
                                <p>总额¥937.00 立减¥0.00</p>
                            </div>
                        </div>
                        <div class="buy-btn" @click="goto('/order/confirm')">
                            <span>去结算（1件）</span>
                        </div>
                    </div>
                    <div class="menu-edit" v-if="isEditCart">
                        <span class="menu-edit-follow">移入关注</span>
                        <span class="menu-edit-delete">删除</span>
                    </div>
                </div>
            </div>
        </div>
        <m-goods-group title="为您推荐">
            <div class="flex">
                <div class="flex-item-5 flex-border-2" :key="key" v-for="(item,key) in 5">
                    <m-goods-box :options="recommend" @click.native="goto('/goods/' + recommend.id)"></m-goods-box>
                </div>
            </div>
        </m-goods-group>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loginConfig: {
                    tip: '登录后可同步账户购物车中的商品',
                    handler: () => this.loginHandler()
                },
                recommend: {
                    id: 1,
                    type: 'large',
                    imgUrl: 'https://m.360buyimg.com/mobilecms/s220x220_jfs/t11719/257/481321980/260610/bc7201c5/59f15b8aN8fb3c4f5.jpg!q70.jpg',
                    detail: '戴尔DELL灵越燃7000 II R1725S 14.0英寸轻薄窄边框笔记本电脑(i7-8550U 8G 128GSSD+1T MX150 2G独显 IPS)银',
                    sellOut: '4589',
                    price: '4999',
                    rate: '92%'
                },
                loginNav: false,
                cartList: [
                    {
                        mall: '京东自营店'
                    }
                ],
                isEditCart: false
            }
        },
        methods: {
            loginHandler() {
                this.goto('/login');
            },
            toggleEditCart() {
                this.isEditCart = !this.isEditCart;
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../../assets/css/var.less';

    .shopping {
        .shopping-no-data {
            background: #fff;
            .no-data-info {
                padding: 10px 0px;
                text-align: center;
                box-shadow: 0px 1px 0px #eee;
                i {
                    font-size: 40px;
                    color: #de181b;
                }
                p {
                    font-size: 14px;
                }
            }
            .no-data-guide {
                height: 70px;
                padding: 10px 0px;
                text-align: right;
                .guide-item {
                    box-sizing: border-box;
                    padding-right: 10px;
                    span {
                        font-size: 16px;
                        color: #e93b3d;
                    }
                    p {
                        font-size: 14px;
                        color: gray;
                    }
                    &:not(last-child) {
                        box-shadow: 1px 0px 0px #eee;
                    }
                }
                .item-ticket {
                    background: url(../../assets/images/shopping_ticket.png) no-repeat center;
                }
                .item-collection {
                    background: url(../../assets/images/shopping_collection.png) no-repeat center;
                }
            }
        }
        .shopping-cart {
            .shopping-cart-menu {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0px 10px;
                height: 45px;
                background: white;
                .menu-location {
                    display: flex;
                    align-items: center;
                    i {
                        font-size: 20px;
                        color: @sub-color;
                    }
                    p {
                        font-size: 14px;
                        color: @sub-color;
                    }
                }
                .menu-edit {
                    flex-grow: 0;
                    span {
                        display: inline-block;
                        height: 45px;
                        line-height: 45px;
                        font-size: 14px;
                        color: #de181b;
                    }
                }
            }
            .shopping-cart-fixbar {
                position: fixed;
                bottom: 56px;
                left: 0px;
                width: 100%;
                box-sizing: border-box;
                height: 50px;
                z-index: 11;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 10px;
                background: white;
                .fixbar-select-all {
                    display: flex;
                    align-items: center;
                    flex-basis: 70px;
                    .fixbar-select-all-text {
                        font-size: 14px;
                    }
                }
                .fixbar-menu {
                    flex: 1;
                    .menu-buy {
                        display: flex;
                        justify-content: flex-end;
                        .buy-info {
                            display: flex;
                            flex-direction: column;
                            padding-right: 10px;
                            .info-total-price {
                                display: flex;
                                text-align: right;
                                label {
                                    flex: 1;
                                    font-size: 16px;
                                    font-weight: 600;
                                    color: #de181b;
                                }
                                span {
                                    flex-grow: 0;
                                    font-size: 14px;
                                }
                            }
                            .info-coupon {
                                flex: 1;
                                p {
                                    font-size: 12px;
                                    color: @sub-color;
                                }
                            }
                        }
                        .buy-btn {
                            flex-basis: 110px;
                            flex-shrink: 0;
                            height: 50px;
                            text-align: center;
                            background: #de181b;
                            span {
                                line-height: 50px;
                                font-size: 14px;
                                color: white;
                            }
                        }
                    }
                    .menu-edit {
                        display: flex;
                        justify-content: flex-end;
                        font-size: 16px;
                        .menu-edit-follow {
                            flex-grow: 0;
                            padding-right: 10px;
                            border-right: 1px solid @divider-color;
                        }
                        .menu-edit-delete {
                            flex-grow: 0;
                            padding-left: 10px;
                        }
                    }
                }
            }
        }
    }

    .shopping-with-fixbar {
        padding-bottom: 50px;
    }
</style>
